import React, { useState, useEffect } from 'react';
import styled, { keyframes } from 'styled-components';
import { Position } from '../utils/gameUtils';

const float = keyframes`
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) scale(1.5);
    opacity: 0;
  }
`;

const HeartEffect = styled.div<{ position: Position }>`
  position: absolute;
  left: ${props => props.position.x}px;
  top: ${props => props.position.y}px;
  font-size: 24px;
  color: #ff69b4;
  animation: ${float} 1s ease-out forwards;
  pointer-events: none;
`;

interface EffectsProps {
  position: Position;
}

const Effects: React.FC<EffectsProps> = ({ position }) => {
  const [effects, setEffects] = useState<Position[]>([]);

  useEffect(() => {
    const newEffect = { ...position };
    setEffects(prev => [...prev, newEffect]);

    const timer = setTimeout(() => {
      setEffects(prev => prev.filter(effect => effect !== newEffect));
    }, 1000);

    return () => clearTimeout(timer);
  }, [position]);

  return (
    <>
      {effects.map((effect, index) => (
        <HeartEffect key={index} position={effect}>
          ❤️
        </HeartEffect>
      ))}
    </>
  );
};

export default Effects; 